<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户验证</title>
    <!-- 引入 Element Plus CSS -->
    <link rel="stylesheet" href="./index.css" />
    <!-- 引入 Vue 3 -->
    <script src="./vue.global.js"></script>
    <!-- 引入 Element Plus JS -->
    <script src="./index.full.js"></script>
    <!-- 引入图标库（Element Plus 的图标需要单独引入） -->
    <script src="./index.iife.min.js"></script>
    <style>
      body {
        padding: 0;
        margin: 0;
        position: relative;
      }
      .demo-form {
        margin-left: 70px;
        overflow: hidden;
      }
      .title {
        font-size: 24px;
        color: #409eff;
        font-weight: 700;
        text-align: center;
      }
      .my-close-btn {
        position: absolute;
        top: -30px;
        right: 0;
        cursor: pointer;
        color: #666;
        font-size: 24px;
        background-color: none;
        border: 0;
      }
      .my-close-btn:hover .el-icon {
        background-color: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h4 class="title">验证</h4>
      <el-form
        class="demo-form"
        :model="form"
        :rules="rules"
        ref="formRef"
        @submit.prevent
      >
        <el-form-item label="" prop="number">
          <el-input
            ref="numberRef"
            v-model="form.number"
            clearable
            placeholder="请输入工号"
            style="width: 260px"
            tabindex="1"
            @focus="focusNumberRef"
            @keyup.enter.prevent="focusPwRef"
            ><template #prepend> <el-button :icon="User" /> </template
          ></el-input>
        </el-form-item>

        <el-form-item label="" prop="password">
          <el-input
            ref="pwRef"
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
            style="width: 260px"
            tabindex="2"
            @focus="focusPwRef"
            @keyup.enter.prevent="submitForm"
          >
            <template #prepend>
              <el-button :icon="Key" />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm" style="width: 260px"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
      <el-button class="my-close-btn" :icon="Close" @click="closeDialog" />
    </div>

    <script>
      const { createApp, ref, nextTick } = Vue;
      const { ElMessage } = ElementPlus;
      // 按需引入图标组件
      const { User, Key, Close } = ElementPlusIconsVue;

      createApp({
        setup() {
          const formRef = ref(null);
          const form = ref({
            number: "",
            password: "",
          });

          const numberRef = ref();
          const focusNumberRef = () => {
            numberRef.value.focus();
          };
          const pwRef = ref();
          const focusPwRef = () => {
            pwRef.value.focus();
          };
          nextTick(() => {
            if (!form.value.number) {
              focusNumberRef();
            }
          });

          const rules = {
            number: [
              { required: true, message: "请输入工号", trigger: "blur" },
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
            ],
          };
          // 渲染进程代码
          const { ipcRenderer } = require("electron");
          const submitForm = () => {
            formRef.value.validate((valid) => {
              if (valid) {
                ipcRenderer.send("form-submitted", { ...form.value });
              } else {
                return false;
              }
            });
          };

          const closeDialog = () => {
            ipcRenderer.send("close-dialog");
          };

          return {
            formRef,
            form,
            rules,
            numberRef,
            pwRef,
            focusNumberRef,
            focusPwRef,
            submitForm,
            closeDialog,
            // 注册图标组件
            User,
            Key,
            Close,
          };
        },
      })
        .use(ElementPlus)
        .mount("#app");
    </script>
  </body>
</html>
